<!-- 侧栏 -->
<template>
	<div id="slide">
	    <!--v-model指令:所谓的“指令”其实就是扩展了HTML标签功能(属性)。可以进行双向绑定，绑定slideShow数据-->
		<mt-popup
			v-model="slideShow"   
			position="left"
			class="slide"
		>
			<div class="slide_content">
				<div class="bg"></div>
				<div class="nav">
					<mt-cell is-link @click.native="showHomePageFn" class="mt-cell-g">
						<span slot="title" >课程表</span>
						<img slot="icon" src="../../assets/img/icon/home.png" width="24" height="24">
					</mt-cell>
					<mt-cell is-link @click.native="showTeacherPageFn" class="mt-cell-g">
						<span slot="title" >查找老师</span>
						<img slot="icon" src="../../assets/img/icon/link_teacher.png" width="24" height="24">
					</mt-cell>
					<mt-cell is-link @click.native="showAttendancePageFn" class="mt-cell-g">
						<span slot="title" >考勤信息</span>
						<img slot="icon" src="../../assets/img/icon/attendance.png" width="24" height="24">
					</mt-cell>
					<mt-cell is-link @click.native="showExamTimePageFn" class="mt-cell-g">
						<span slot="title" >考试成绩</span>
						<img slot="icon" src="../../assets/img/icon/exam_time.png" width="24" height="24">
					</mt-cell>
					<mt-cell is-link @click.native="logoutFn" class="mt-cell-g">
						<span slot="title" >退出登录</span>
						<img slot="icon" src="../../assets/img/icon/logout.png" width="24" height="24">
					</mt-cell>
				</div>
			</div>
		</mt-popup>
	</div>
</template>

<script>
import Vue from 'vue'
import { Popup } from 'mint-ui';
import { Cell } from 'mint-ui';
import { Toast } from 'mint-ui';

Vue.component('mt-cell', Cell);
Vue.component('mt-popup', Popup);

export default {
	name: 'slide',
	data () {
		return {
		 	
		}
	},
	methods : {
		//解决使用vuex后侧栏关闭的问题
		solveCloseSlideFn(that){
			setTimeout(function(){
				var modal = document.querySelector('.v-modal')
				if(modal != null){
					modal.onclick=function(){
						that.$store.commit({
							type :'closeSlideFn',
						})
					}
				}
			},50)
		},
		//显示首页
		showHomePageFn(){
			//改变动画
			this.$store.commit({
				type : 'changeAnimate',
				mode : 'normal'
			})
			//关闭侧栏
			this.$store.commit({
				type :'closeSlideFn',
			})
			this.$router.push('/')
		},
		//显示所有老师信息页面
		showTeacherPageFn(){
			//改变动画
			this.$store.commit({
				type : 'changeAnimate',
				mode : 'reverse'
			})
			//关闭侧栏
			this.$store.commit({
				type :'closeSlideFn',
			})
			this.$router.push('/teacher')
		},
		//显示考勤页面
		showAttendancePageFn(){
			//改变动画
			this.$store.commit({
				type : 'changeAnimate',
				mode : 'normal'
			})
			//关闭侧栏
			this.$store.commit({
				type :'closeSlideFn',
			})
			this.$router.push('/attendance')
		},
		// 显示考试时间页面
		showExamTimePageFn(){
			//改变动画
			this.$store.commit({
				type : 'changeAnimate',
				mode : 'normal'
			})
			//关闭侧栏
			this.$store.commit({
				type :'closeSlideFn',
			})
			this.$router.push('/exam_time')
		},
		//退出登录
		logoutFn(){
			//设置登录状态为 false
			this.$store.commit({
				type : 'setLoginedFn',
				status : false
			})
			//关闭侧栏
			this.$store.commit({
				type :'closeSlideFn',
			})
			//提示退出成功
			Toast({
				message : '退出成功',
				position : 'bottom',
				duration : 500
			});
			//跳转到登录页面
			this.$router.push("/login");
		}
	},
	computed : {
		slideShow : function(){
			//关闭侧栏
			this.solveCloseSlideFn(this)	
			return this.$store.state.slideShow
		}
	}
}
</script>

<style>
	#slide {

	}
	#slide .slide {
		height: 100vh;
	}
	#slide .slide_content {
		width: 200px;
		height: 100vh;
		background-color: #fff;
		color: #000;
	}
	#slide .slide_content  .bg {
		width: 200px;
		height: 150px;
		background: #000 url(../../assets/img/slide_bg.jpg) no-repeat 50% 50%;
		background-size: cover;
	}
	#slide .slide_content  .nav {
		margin-top: 20px;
	}
	#slide .slide_content  .mt-cell-g:hover{
	    cursor:pointer;
	    background:#00FFFF;
	}
</style>